<template>
	<div id="ebookDetail">
		<!-- 头部导航栏 -->
		<div class="top">
			<van-icon @click='back' class-prefix="iconfont" name="fanhui1" size="20" color="#000000"/>
			<van-cell title="返回"></van-cell>
		</div>
		
		<!-- 书籍详情 -->
		<div class="ebook">
			<div class="eDetail">
				
				<!-- 有关详情 -->
				<div class="eDetail_top">
					<div class="eDetail_top_text">
						<h2>{{eDetailList.title}}</h2>
						<p v-if="eDetailList.subtitle">{{eDetailList.subtitle}}</p>
						
						<!-- 星星 -->
						<div class="star">
							<van-rate v-model="value" allow-half :size="13" void-icon="star" void-color="#eee" />
							<!-- <span>{{eDetailList.rating_cnt}}</span> -->
						</div>
						
						<!-- 评论 -->
						<div class="rating_cnt">
							<p v-if="eDetailList.rating_cnt">{{eDetailList.rating_cnt}}评价</p>
							<p v-else>暂无评分</p>
						</div>
						
						<!-- 评分 标签 -->
						<div class="rating">
							<van-tag plain v-if="eDetailList.book_rating_count">
								<van-rate :size="12" color="#42bd56" void-icon="star" void-color="#42bd56" :count="1" />
								<span class="book_average_rating">{{eDetailList.book_average_rating}}</span>
								<span>{{eDetailList.book_rating_count}}评价</span>
								<span class="fenge"> | </span>
								<span>豆瓣阅读</span>
							</van-tag>
						</div>
						
						
						<div class="eDetail_top_textss">
							<p>{{eDetailList.original_author}}</p>
							<p>{{eDetailList.kind}}</p>
							<p>{{eDetailList.onsale_time}} 开售</p>
							<p>{{eDetailList.round_word_count}}</p>
						</div>
						<p class="price" v-if="eDetailList.price">￥{{(eDetailList.price/100).toFixed(2)}}</p>
						<p class="price" v-else>免费</p>
					</div>
					<div class="eDetail_top_Img">
						<div class="eDetail_Imgbox">
							<img :src="eDetailList.cover"/>
						</div>
					</div>
				</div>
				
				<!-- 会员 -->
				<div class="eDetail_bottom">
					<van-cell-group inset>
					  <van-cell is-link>
					    <template #title>
							<van-icon class-prefix="iconfont" name="-huangguan" color="#FFB103" size="20"/> 
							<span class="membersTitle">开通会员，可免费在线阅读本书，首月特惠</span>
					    </template>
					    
					  </van-cell>
					</van-cell-group>
				</div>
			</div>
			
			<!-- 简介 -->
			<div class="introduction">
				<h3>简介</h3>
				<div class="introduction_text" ref="textss">
					<div v-html="eDetailList.abstract_html"></div>
				</div>
				<div class="moreBtn" @click="moreBtn">
					<van-icon name="arrow-down" />
				</div>
			</div>
			
			<!-- 目录 -->
			<div class="toc">
				<h3>目录</h3>
				<div class="tocList" v-for="(item,index) in eDetailList.table_of_contents">
					<span>{{item.title}}</span>
				</div>
				<div class="moreBtn" @click="moreBtnToc">
					<van-icon name="arrow-down" />
				</div>
			</div>
			
			<!-- 标签 -->
			<div class="toc tagsList">
				<h3>标签</h3>
				<van-row type="flex" :gutter="4">
				  <van-col v-for="(item,index) in eDetailList.tags"><span>{{item.tag}}</span></van-col>
				</van-row>
			</div>
			
			<!-- 出版方 -->
			<div class="toc">
				<h3>{{eDetailList.agent_works_relationship}}</h3>
				<div class="">
					
				</div>
			</div>
		</div>
		
	</div>
</template>

<script>
	export default{
		data(){
			return{
				eDetailList:this.$store.state.ebookDetail,
				value: 2.5,
			}
		},
		mounted() {
			this.$store.dispatch('getEbookDetail',this.$route.params.ebookId)
		},
		methods:{
			back(){
				this.$router.back()
			},
			
			moreBtn(){
				var Itext=document.getElementsByClassName('introduction_text');
				var moreBtn=document.querySelector('.moreBtn .van-icon');
				
				Itext[0].classList.toggle('extended')
				moreBtn.classList.toggle('van-icon-arrow-up')
			},
			moreBtnToc(){
				var tocList=document.getElementsByClassName('tocList');
				var moreBtn=document.querySelector('.toc>.moreBtn .van-icon');
				
				tocList[0].classList.toggle('extended')
				moreBtn.classList.toggle('van-icon-arrow-up')
			}
		}
	}
</script>

<style lang="scss">
	#ebookDetail{
		// 顶部导航栏
		.top{
			display: flex;
			flex-direction: row;
			align-items: center;
			box-shadow: 0 0.0625rem 0.25rem #dadada;
			background-color: #FFFFFF;
			
			position: sticky;
			top: 0;
			z-index: 8;
		
			.iconfont-fanhui1{
				margin-left: 0.9375rem;
			}

			.van-cell__title{
				font-size: 1rem;
			}
		}
		
		// 书籍详情
		.eDetail{
			border-bottom: 0.0625rem solid #f0f0f0;
		}
		// 有关详情
		.eDetail_top{
			padding: 18px 13px 15px;
			box-sizing: border-box;
			line-height: 1.5;
			
			// background-color: antiquewhite;
			display: flex;
			justify-content: space-between;
		}
		.eDetail_top_text{
			flex: 7;
			margin-right: 0.625rem;
		}
		.eDetail_top_textss{
			font-size: 0.875rem;
			padding: 0.625rem 0;
			box-sizing: border-box;
		}
		.rating{
			margin-top: 0.3125rem;
			.van-tag{
				padding: 0.125rem 0.3125rem;
				box-sizing: border-box;
				border-color: #dedede;
				color: #a6a6a6;
			}
		}
		.fenge{
			margin: 0 0.3125rem;
		}
		.rating_cnt{
			font-size: 0.8125rem;
			color: #777777;
		}
		.book_average_rating{
			color: #42bd56;
			margin:0 0.375rem;
		}
		.price{
			font-size: 1rem;
			color: #3db192;
		}
		.eDetail_top_Img{
			flex: 3;
			
			.eDetail_Imgbox{
				border-radius: 0.25rem;
			}
			img{
				border-radius: 0.25rem;
				box-shadow: 0.0625rem 0.0625rem 0.1875rem rgb(141, 141, 141);
				width: 100%;
				height: 100%;
			}
		}
		
		
		// 会员
		.eDetail_bottom{
			padding-bottom: 0.9375rem;
			.van-cell-group{
				box-shadow: 0.125rem 0.125rem 0.125rem 0 rgb(0 0 0 / 10%);
			}
			.van-cell{
				background: #f4efe7;
				padding: 0.1875rem 0.625rem;
				box-sizing: border-box;
			}
			.van-cell__title{
				flex: 4;
			}
			.van-cell__value{
				flex: 1;
			}
			.membersTitle,.membersValue{
				color: #333;
				font-size: 0.75rem;
				white-space: nowrap;
			}
			.membersTitle{
				margin-left: 0.3125rem;
			}
			.van-cell__right-icon{
				color: #333;
			}
		}
		
		// 简介
		.toc,.introduction{
			background-color: #f8f9f9;
			padding: 0 0.9375rem 1.25rem;
			box-sizing: border-box;
			line-height: 1.6;
			
			h3{
				color: #333333;
				font-size: 1.0625rem;
			}
			
			.moreBtn{
				text-align: center;
				color: #33B3C4;
			}
		}
		.introduction{
			h3{
				padding: 1.25rem 0 0;
				box-sizing: border-box;
				margin: 0 0 0.75rem;
			}
			
			.introduction_text{
				display: -webkit-box;
				-webkit-line-clamp: 6;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.introduction_text.extended{
				-webkit-line-clamp: 999;
			}
		}
		
		// 目录
		.toc{
			padding-top: 0.625rem;
			box-sizing: border-box;

			.tocList{
				display: -webkit-box;
				-webkit-line-clamp: 6;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				
				span::before{
					display: inline-block;
					width: 1.2em;
					color: rgb(166, 166, 166);
					content: '•';
					text-align: center;
					line-height: 1;
				}
			}
			.tocList.extended{
				-webkit-line-clamp: 999;
			}
		}
		
		// 标签
		.tagsList{
			.van-col{
				
				
				span{
					padding: 0.375rem 0.625rem;
					box-sizing: border-box;
					color: #FFFFFF;
					line-height: 2.1875rem;
					background-color: #389eac;
				}
			}			
		}

	}
</style>